import { Select, Form, Button, Tabs, Grid } from '@arco-design/web-react';
// const Option = Select.Option;
// import ActivationCode from "./ActivationCode"
import  { useState , useMemo } from 'react';
import { useBoolean } from 'ahooks';

import ManageSysModal from "./ManageSysModal";

import AudioTable from "./AudioTable";

const Audio = () => {

    const activeCode = ['Beijing', 'Shanghai', 'Guangzhou', 'Disabled'];
    const submit = (value) => {
        console.log(value);
    }
    const [openManageSys, { setTrue: openManageSysModel, setFalse: hideManageSysModel }] = useBoolean(false)
    const [tabsArr, setTabsArr] = useState([
        {
            key: '1',
            tab: '客户欢迎',
        },
        {
            key: '2',
            tab: '促单',
        },
        {
            key: '3',
            tab: '二级分类名称',
        },
    ])
    return (
        <>
            <div className="flex  items-center mb-10">
                激活码
                <Select className="ml-10" style={{ width: 160 }} onChange={submit} options={activeCode} placeholder="全部" allowClear></Select>
            </div>
            <div className="flex  items-center mb-10">
                音频分组
                <Button className="ml-10" type='outline' onClick={openManageSysModel}>新建和管理分组</Button>
                <ManageSysModal
                    open={openManageSys}
                    onCancel={hideManageSysModel}
                >
                </ManageSysModal>
            </div>
            <Grid.Row>
                <Grid.Col span={24}>
                    <Tabs defaultActiveTab='1' type='card-gutter'>
                        {tabsArr.map(item =>
                            <Tabs.TabPane key={item.key} title={item.tab}>
                                <div className='p-10'>
                                    {item.tab}
                                    {/* 根据业务交互服装form表 */}
                                </div>
                            </Tabs.TabPane>)}
                    </Tabs>
                </Grid.Col>
            </Grid.Row>
            {/* table 表 */}
            <div className='mt-15'>
                <AudioTable></AudioTable>
            </div>
        </>
    )
}


export default Audio; 